import React, {useState,useEffect } from 'react';
import Table from '../../../components/packagingPopup/LmdTable';
import '../../../scss/lmd/WarehousingManagement.scss'
import { Button, Form, Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { WarehouseReport_table,WarehouseReport_search } from '../../../tools/api';


function WarehouseReport(props) {
    // 定义表格数据，
    var [dataSource,setdataSource]=useState([]); 
    var [loading,setloading]=useState(false);

    //表单数据过滤
    const onFinish = (value) => {
        if(value!==[]){
            WarehouseReport_search({warehousename_like:value.warehousename,areaname_like:value.areaname,category_like:value.category}).then((res)=>{
                setloading(true);
                setTimeout(() => {
                    setloading(false)
                }, 500);
                setdataSource(res.data)
                
            })
        }
    };
    // 表格数据初始化
    useEffect(()=>{
        datasource();
    },[])
    var datasource=()=>{
        WarehouseReport_table().then((res)=>{
            setdataSource(res.data)
        })
    }

    return (
        <div id='warehousingmanagement'>
            <div className='warehousingmanagementsearch'>
                <Form className='form' initialValues={{ remember: true }} onFinish={onFinish}>
                    <Form.Item className='item' label="所属仓库" name="warehousename" >
                        <Input placeholder='请输入供应商姓名' />
                    </Form.Item>
                    <Form.Item className='item' label="所属区域" name="areaname">
                        <Input placeholder='请输入供应商姓名' />
                    </Form.Item>
                    <Form.Item className='item' label="商品品类" name="category" >
                        <Input placeholder='请输入供应商姓名' />
                    </Form.Item>
                    <Button className='btn' type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={onFinish}>搜索</Button>
                </Form>
            </div>
            <Table dataSource={dataSource} status={6} loading={loading}/>
        </div>
    );
}

export default WarehouseReport;